<template>
	<view class="main-view">
		<view v-show="!changePassword" class="center-view">
			<view class="info-item dashboard">
				<text class="left-text">用户名</text>
				<text class="right-text">{{username}}</text>
			</view>
			<view class="info-item dashboard">
				<text class="left-text">真实姓名</text>
				<text class="right-text" v-show="readOnly || !edit">{{name}}</text>
				<input v-show="!readOnly && edit" v-model="name">
			</view>
			<view class="info-item dashboard">
				<text class="left-text">个人简介</text>
				<text class="right-text" v-show="readOnly || !edit">{{intro}}</text>
				<textarea v-show="!readOnly && edit" v-model="intro"></textarea>
			</view>
			<view class="info-item dashboard">
				<text class="left-text">身份</text>
				<text class="right-text">{{identity}}</text>
			</view>
			<view class="info-item dashboard">
				<text class="left-text">加入方式</text>
				<text class="right-text">{{joinMet == 0 ? '注册' : '导入'}}</text>
			</view>
			<view class="info-item dashboard">
				<text class="left-text">加入时间</text>
				<text class="right-text">{{formatDatetime(new Date(joinTime))}}</text>
			</view>
			<view>
				<!-- <button v-show="!readOnly && !edit" @click="editButton">编辑</button> -->
				<button type="primary" v-show="!readOnly && !edit" @click="changePassButton">修改密码</button>
			</view>
			
			<view>
				<button type="primary"  v-show="!readOnly && edit" @click="cancelButton">取消</button>
				<button type="primary"  v-show="!readOnly && edit" @click="submitButton">提交</button>
			</view>
		</view>
		<view v-show="changePassword" class="center-view col-arrange">
			<view>
				<!-- <text>:</text> -->
				<input type="password" class="theme-input" v-model="oriPassword" placeholder="原密码"/>
			</view>
			<view>
				<!-- <text>:</text> -->
				<input type="password" class="theme-input" v-model="newPassword" placeholder="新密码"/>
			</view>
			<view>
				<!-- <text>:</text> -->
				<input type="password" class="theme-input" v-model="conNewPassword" placeholder="确认密码"/>
			</view>
			<view>
				<text style="color:red">{{errorText}}</text>
			</view>
			<button class="short-button" type="primary" style="background-color:green" @click="submitPassButton">提交</button>

			<button class="short-button" type="primary" style="background-color:red" @click="cancelPassButton">取消</button>
		</view>
	</view>
</template>
	
	

<script>
	import formatDatetime from "../../common/zdateutil.js"
	import tranUtil from "../../common/znumtranutil.js"
	export default {
		
		data() {
			return {
				readOnly : false,
				edit : false,
				username : "",
				name : "",
				intro : "",
				identity : "",
				joinMet : 0,
				joinTime : 0,
				formatDatetime : null,
				changePassword : false,
				oriPassword : "",
				newPassword : "",
				conNewPassword : "",
				errorText : ""
			}
		},
		onBackPress(options) {  
            // if (options.from === 'navigateBack') {  
            //     return false;  
            // }  
			// this.back(); 
			uni.navigateTo({
				url : './main'
			}) 
            return true;  
        },  
		onLoad : function(option) {
			this.formatDatetime = formatDatetime.formatDatetime;
			var userId;
			var vm = this;
			if(option.userId != null){
				userId = option.userId;
				this.readOnly = true;
			}else{
				uni.getStorage({
					key : 'userToken',
					success :function(res){
						var token = res.data;
						userId = token.userId;
						
						// 获取用户资料
						vm.$get(vm.userurl + '/user/get',{'username':userId},function(res){
							var data = res.data;
							if(data.code != 0){
								console.log(data.message);
								return ;
							}
							var object = data.object;
							vm.username = object.username;
							vm.name = object.name;
							vm.intro = object.intro;
							// console.log(object.identify)
							vm.identity = tranUtil.tranUtil.identifyTran(object.identify);
							// console.log(vm.identity)
							vm.joinMet = object.joinMet;
							vm.joinTime = object.joinTime;
						});
					},
					fail : function(){
						uni.navigateTo({
							url : 'index'
						})
					}
				});
			}
			
		},
		methods: {
			editButton : function(){
				this.edit = true;
			},
			cancelButton : function(){
				this.edit = false;
			},
			changePassButton : function(){
				this.changePassword = true;
			},
			cancelPassButton : function(){
				this.changePassword = false;
			},
			submitPassButton : function(){
				if(this.newPassword == '' || this.oriPassword == '' || this.conNewPassword == ''){
					this.errorText = '关键信息不可为空';
					return ;
				}
				if(this.newPassword != this.conNewPassword){
					this.errorText = '两次密码输入不一致';
					return;
				}
				var param = {'oriPassword':this.oriPassword,'newPassword':this.newPassword};
				// console.log(param)
				var vm = this;
				this.$post(this.userurl + '/user/changePassword',param,function(res){
					var data = res.data;
					if(data.code != 0){
						vm.errorText = data.message;
						return;
					}
					uni.navigateTo({
						url : 'index'
					})
				});
			},
			submitButton : function(){

			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	.main-view{
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
        align-items: center;
	}
	.center-view{
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}
	.info-item{
		/* margin-top: 10upx; */
		border-bottom: 1upx solid gray;
		border-top: 1upx solid gray;
		width: 100%;
		height:80upx;
		padding-top: 20upx;
		/* background-color: white; */
		
	}
	.left-text{
		position: absolute;
		left: 10upx;
		font-size: 40upx;
		color: gray;
	}
	.right-text{
		position: absolute;
		right: 10upx;
		font-size: 40upx;
	}
	button{
		margin-top:20upx;
		width: 600upx;
	}
	.short-button{
		width: 450upx;
		border-radius: 50upx;
	}
	input{
		margin-top:25upx;
		margin-bottom: 25upx;
		/* background-color: rgba(231, 226, 226, 0.568); */
		
		height:40upx;
		width: 400upx;
		padding: 20upx;
		padding-left: 30upx;
		border-radius: 50upx;
		/* border-bottom: 1upx solid black; */
	}
</style>
